<style rel="stylesheet/scss" lang="scss">


</style>

<template>
    <div>
        <div class="menu">
            <div v-for="(item,oneIndex) in menu_items" v-if="item.isVisibility">
                <div class="menu_first" @click="oneMenu_click(oneIndex)">
                    <i class="menu_icon_l" :class="item.classname"></i><!--
				--><span>{{item.name}}</span><!--
				--><i class="menu_icon_r"></i>
                </div>
                <ul class="menu_second" v-if="item.isSelected">
                    <li v-for="(c,twoIndex) in item.children_menu_items" v-bind:class="{nav_active:c.isSelected}"
                        @click="menu_click(oneIndex,twoIndex)"
                        v-if="c.isVisibility">
                        {{c.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'adverMenu',
        props: {},
        data() {
            return {
                menu_items: [
                    {
                        name: 'CPA数据管理',
                        classname: 'cpaDataManaIcon',
                        isSelected: true,
                        isVisibility: true,
                        path: '/cpaDataMana',
                        children_menu_items: [
                            {name: '实时数据', isSelected: false, isVisibility: true, path: '/realTimeData'},
                        ]
                    },
                ]
            };
        },
        created() {
            var path = this.$router.currentRoute.path;
            var pathArr = path.split('/');
            switch (pathArr[1]) {
                case 'cpaDataMana':
                    var menuItem = this.menu_items[0];
                    menuItem.isSelected = true;
                    switch (pathArr[2]) {
                        case 'realTimeData':
                            this.content_items_each(menuItem.children_menu_items, 0);
                            break;
                    }
                    break;
            }
        },
        methods: {
            content_items_each(arr, index) {
                for (let i in arr) {
                    if (i == index) {
                        arr[i].isSelected = true;
                    } else {
                        arr[i].isSelected = false;
                    }
                }
            },
            menu_click(oneIndex, twoIndex) {
                var items = this.menu_items[oneIndex].children_menu_items;
                for (let item of this.menu_items) {
                    this.content_items_each(item.children_menu_items, -1);
                }
                items[twoIndex].isSelected = true;
                this.$router.push({path: this.menu_items[oneIndex].path + items[twoIndex].path});
            },
            oneMenu_click(oneIndex) {
                if (this.menu_items[oneIndex].isSelected) {
                    this.menu_items[oneIndex].isSelected = !this.menu_items[oneIndex].isSelected;
                } else {
                    this.content_items_each(this.menu_items, oneIndex);
                }
            }
        },
    };
</script>
